//table2
Vue.component("qfTableColumn", {
    // 将属性注入到模型中
    props: ["prop", "label"],
    template: `<span />`,
    // 组件渲染完毕后触发
    // 相当于window.onload
    mounted() {
      // console.log(this); // 组件实例/对象
      // console.log(this.$parent); // 父组件实例/对象（就是qfTable）

      this.$parent.column.push(this);
    },
  });

  Vue.component("qfTable", {
    data() {
      return {
        column: [
          // 之前：{title: '编号', key: 'id'}
          // 现在：{label: '编号', prop: 'id'}
          // 存放了一个个子组件对象， 然后每个字组件对象上有label、prop数据
        ],
      };
    },
    mounted() {
      // 父渲染 -> 渲染过程中解析子组件 子组件渲染 -> 子完毕后子mounted  -> .... -> 最后父mounted
      console.log(this.column);
      console.log(this.column[4].$scopedSlots.default({ sex: 1 })[0].text);
    },
    props: {
      data: {
        type: Array,
        default: [],
      },
    },
    template: `<table border="1" cellpadding="10" cellspacing="0">
      <thead>
       <tr>
         <th v-for="item in column">{{item.label}}</th>
       </tr>
      </thead>
      <tbody>
      <tr v-for="row in data">
        <!-- 
        <td>{{row.id}}</td>
        <td>{{row.name}}</td>
        <td>{{row.age}}</td>
        <td>暂不写</td>

        {{row.???}}
        {{row.col.prop}}
        {{row[col.prop]}}
        -->
        <td v-for="(col, index) in column">
          {{column[index].$scopedSlots.default ? column[index].$scopedSlots.default(row)[0].text : row[col.prop]}}
        </td>
      </tr>
       <!-- 默认插槽：因为调用了所以才提示组件不存在 -->
       <slot></slot>
      </tbody>
    </table>`,
  });

//table1
Vue.component('qfbiaoge',{
    props:['columns','data'],
    template:`<table border="1" cellpadding="10" cellspacing="0">
                <thead>
                    <tr><th v-for="thitem in columns">{{thitem.title}}</th></tr>
                </thead>
                <tbody>
                    <tr v-for="tritem in data">
                <td v-for="tditem in columns">
                <template v-if="tditem.render">
                <span v-html="tditem.render(tritem)"></span>
                </template>
                <template v-else="tditem.render">
                {{tritem[tditem.key]}}
                </template>
                </td>
                    </tr>
                </tbody>
            </table>`
})


//分页框
Vue.component('qfpage',{
    props:['total','page-size'],
    template:`<div class='qf-page'>
                    <span v-for="num in totalpage" @click="$emit('pageclick',num)">{{num}}</span>
            </div>`,
        data(){
            return{
                totalpage:''
            }
        },
        watch:{
            total:{
                handler(newdata){
                    this.totalpage=Math.ceil(newdata/this.pageSize)
                },
                immediate:true

            }
        }

})


//对话框
Vue.component('qfdialog',{
    props:['title','value'],
    template:`<div class="qfdialog" v-if='value'>
                    <div class="box">
                        <div class="header">{{title}}</div>
                        <div class="main"><sondialog></sondialog></div>
                        <div class="footer">
                                <button @click="$emit('click',false)">取消</button>
                                <button>确定</button>
                        </div>
                    </div>
              </div>`,
        components:{
            sondialog:{
                template:`<input type='text'/>`
            }
        }
})

//loading2组件
Vue.component('qfloading2',{
    props:['state'],
    template:`<div class='qfloading2' v-if='state' @click="$emit('close')"></div> `
})
//loading1组件
Vue.component('qfloading1',{
    props:['state'],
    template:`
    <div class=qfloading1 v-if="state">
    <span></span>  
    <span></span>  
    <span></span>  
    <span></span>  
    <span></span>  
    </div>
    `
})

//按钮组件
Vue.component('qfbutton',{
    props:['content','type'],
    //qfbutton qfbutton--primary qfbutton--normal
    template:`<button :class="['qfbutton','qfbutton--'+type,'qfbutton--noraml']">{{content}}</button>
                                
    ` 
})
//表单组件
Vue.component('qftable',{
    props:{
        state:{
            type:Boolean,
            default:true
        }
    },
    template:`<fieldset>
    <legend>前封封装的表单</legend>
    账号<input type="text" v-model="formdata.account">
    密码<input type="password" v-model="formdata.password">
    <button @click="$emit('click',formdata)" v-if="state">点我啊 余其权</button>
    </fieldset>`,
    data(){
        return{
            formdata:{
                account:'',
                password:''
            }
        }
    },

})
//导航栏组件
Vue.component('qf-nav-bar',{
    props:['title'],
    template:`<div class="qf-nav-bar">
        <span @click='$emit("fh")'>&lt;返回</span>
        <span>{{title}}</span>
        <span @click='$emit("sss")'>搜索</span>
    </div>`
})